<template>
  <div class="material-layout">
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />
    
    <div class="content">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <component :is="Component" v-if="!$route.meta.keepAlive" />
      </router-view>
    </div>
    
    <van-tabbar v-if="showTabbar" route fixed placeholder>
      <van-tabbar-item 
        v-for="(item, index) in tabbarItems" 
        :key="index"
        :to="item.path"
        :icon="item.icon"
      >
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'MaterialLayout',
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 导航标题
    const title = computed(() => {
      return route.meta.title || '物资管理'
    })
    
    // 底部标签页
    const tabbarItems = [
      { 
        title: '物资概览', 
        path: '/new/material', 
        icon: 'home-o' 
      },
      { 
        title: '物资列表', 
        path: '/new/material/list', 
        icon: 'bars' 
      },
      { 
        title: '库存查询', 
        path: '/new/material/inventory', 
        icon: 'search' 
      },
      { 
        title: '我的申领', 
        path: '/new/material/apply', 
        icon: 'shopping-cart-o' 
      }
    ]
    
    // 是否显示底部标签栏
    const showTabbar = computed(() => {
      const excludedRoutes = [
        'materialDetail',
        'materialDetailWithId',
        'materialInbound',
        'materialOutbound',
        'materialCategory',
        'materialReport',
        'materialWarning'
      ]
      return !excludedRoutes.includes(route.name)
    })
    
    // 返回上一页
    const goBack = () => {
      if (route.path === '/new/material') {
        router.push('/new/apps')
      } else {
        router.back()
      }
    }
    
    return {
      title,
      tabbarItems,
      showTabbar,
      goBack
    }
  }
}
</script>

<style lang="scss" scoped>
.material-layout {
  min-height: 100vh;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  
  .content {
    flex: 1;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style> 